<template>
    <div>
        <!-- 点击选择兴趣技能弹出对话框 -->
        <el-dialog v-model="dialogFormVisible" style="width: 1024px;">
            <div class="hobbyTitle">
                <div v-if="!inputValue.length">
                    <div class="title">
                        选择我的兴趣技能<span>{{crumbs.length}} / 7</span>
                    </div>
                    <div class="text">例如舞蹈就选舞种</div>
                </div>
                <div v-else>
                    <div style="font-size: 18px;" @click="toBack">
                        <span><svg t="1666317359387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2537" width="16" height="16"><path d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z" p-id="2538" fill="#000000"></path></svg></span>
                        <span>返回</span>
                    </div>
                </div>
            </div>
            <el-form>
                <el-form-item>
                    <div class="inputBox">
                        <el-input v-model="inputValue" class="w-50 m-2" placeholder="搜索兴趣技能" :prefix-icon="Search" />
                    </div>
                    <el-button @click="" style="margin-left: 10px;" :disabled="!inputValue.trim()">搜索</el-button>
                </el-form-item>
            </el-form>
            <div v-if="!inputValue.length">
                <!-- 面包屑 -->
                <div class="crumbsBox">
                    <div class="crumbs" v-for="(tag,index) in crumbs" :key="tag.id"> {{tag.name}} <span
                            @click="removeCrumb(tag,index)"><svg t="1666231319556" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3113" width="20" height="20">
                                <path
                                    d="M511.998977 961.610044c-248.306272 0-449.607998-201.307865-449.607998-449.614138S263.692704 62.389956 511.998977 62.389956c248.364601 0 449.610044 201.299679 449.610044 449.606974S760.363577 961.610044 511.998977 961.610044L511.998977 961.610044zM718.186989 380.921639c8.457626-8.462742 8.457626-22.202675 0-30.658254l-45.927005-45.871747c-8.459672-8.459672-22.138206-8.459672-30.599925 0L511.603981 434.44874 381.546879 304.391638c-8.459672-8.459672-22.1423-8.459672-30.599925 0l-45.927005 45.871747c-8.457626 8.455579-8.457626 22.195511 0 30.658254l130.057101 130.053008L305.019948 641.031748c-8.457626 8.455579-8.457626 22.140253 0 30.599925L350.946954 717.555609c8.457626 8.404414 22.140253 8.404414 30.599925 0l130.057101-130.057101L641.661082 717.555609c8.461719 8.404414 22.140253 8.404414 30.599925 0l45.927005-45.922912c8.457626-8.459672 8.457626-22.144346 0-30.599925L588.129888 510.97567 718.186989 380.921639 718.186989 380.921639z"
                                    p-id="3114" fill="#bfbfbf"></path>
                            </svg></span></div>
                </div>
                <div style="margin: 8px 0 10px 0;">推荐兴趣技能</div>
                <div class="tagListBox">
                    <el-scrollbar max-height="295px" @scroll="handlerScroll">
                        <div class="tagItem" v-for="(item,index) in recommendStore.hobbies" @click="handlerChange(item)"
                            :key="item.id" >{{item.name}}<span v-show="item.flag"><svg
                                    t="1666228870131" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2585" width="20" height="20">
                                    <path
                                        d="M512 64C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z m301.264 333.245L493.637 716.872c-0.127 0.129-0.245 0.264-0.373 0.392-12.499 12.499-28.882 18.747-45.265 18.745-16.382 0.003-32.765-6.246-45.265-18.745-0.128-0.128-0.246-0.263-0.373-0.392L210.736 525.245c-24.994-24.994-24.994-65.516 0-90.51 24.993-24.993 65.516-24.993 90.51 0L448 581.49l274.755-274.755c24.994-24.993 65.516-24.993 90.51 0 24.993 24.994 24.993 65.517-0.001 90.51z"
                                        p-id="2586" fill="#d4237a"></path>
                                </svg></span></div>
                    </el-scrollbar>
                </div>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" style="height: 40px;width:130px">取消</el-button>
                    <el-button type="primary" @click="save" style="height: 40px;width:130px" color="#f93684">确定
                    </el-button>
                </span>
            </div>
            <!-- 搜索显示的区域 -->
            <div v-else style="height: 420px;">
                <div class="searchTitle">搜索结果</div>
                <div class="searchList"> 
                    <div class="search_item" v-for="(item,index) in recommendStore.searchHobbies" :key="item.id" @click="addHobbies(item)">
                        <div class="love">
                            <svg t="1666283848041" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="5080" width="24" height="24">
                                <path
                                    d="M856.96 543.296L526.944 870.24a32 32 0 0 1-45.184-0.128L153.408 541.248l-0.064 0.064C102.72 474.432 96 434.528 96 374.72 96 238.464 207.744 128 345.6 128c64.16 0 122.208 23.936 165.92 63.232A250.304 250.304 0 0 1 678.4 128c137.856 0 249.6 110.464 249.6 246.72 0 67.296-26.944 124.16-71.072 168.544z m-52.192-48.128c34.144-33.76 51.904-74.08 51.904-120.416 0-97.344-79.808-176.256-178.272-176.256a178.528 178.528 0 0 0-121.504 47.264 245.6 245.6 0 0 1 35.744 113.504s-69.44 0-69.44-0.064c-7.968-90.176-84.448-161.792-177.6-161.792-98.464 0-180.224 80-180.224 177.344 0 54.688 4.192 71.232 40 118.592l299.52 299.04 299.904-297.216z"
                                    fill="#606266" p-id="5081"></path>
                            </svg>
                        </div>
                        <div class="text">
                            <p>
                                <svg t="1666284174583" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="8970" width="18" height="18">
                                    <path
                                        d="M463.36 781.312c-179.2 0-325.12-141.824-325.12-316.416S284.16 148.48 463.36 148.48s325.12 141.824 325.12 316.416c0 81.92-31.744 159.232-89.6 218.624-61.952 62.976-145.408 97.792-235.52 97.792z m0-566.272c-142.336 0-258.56 112.128-258.56 249.856s116.224 249.856 258.56 249.856c71.68 0 138.24-27.648 187.904-78.336 45.568-46.592 70.656-107.52 70.656-172.032 0-137.216-115.712-249.344-258.56-249.344z"
                                        p-id="8971" fill="#111111"></path>
                                    <path
                                        d="M835.072 867.328c-8.704 0-16.896-3.072-23.552-9.728L651.264 697.344c-12.8-12.8-12.8-34.304 0-47.104 12.8-12.8 34.304-12.8 47.104 0l160.256 160.256c12.8 12.8 12.8 34.304 0 47.104-6.656 6.144-14.848 9.728-23.552 9.728z"
                                        p-id="8972" fill="#111111"></path>
                                </svg>
                                <span class="searchName">{{item.name}}</span>  
                            </p>
                            <p>{{item.description}}</p>
                        </div>
                        <span class="addIcon">
                            <svg t="1666283721637" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3671" width="16" height="16">
                                <path
                                    d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
                                    p-id="3672" fill="#606266"></path>
                            </svg>
                        </span>
                    </div>
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { debounce, throttle } from 'lodash';
import { reactive, ref, onMounted, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import bus from '@/bus';
// 引入仓库
import useRecommendStore from '../../stores/recommend'
const recommendStore = useRecommendStore()
const dialogFormVisible = ref(false)

// 存储面包屑的数组
let crumbs = ref(JSON.parse(localStorage.getItem("hobbyList"))||[])
// 存储推荐兴趣技能的数组
// let hobbies = reactive([
//     {
//         name: 1,
//         flag: false
//     }, {
//         name: 2,
//         flag: false
//     },
//     {
//         name: 3,
//         flag: false
//     },
//     {
//         name: 4,
//         flag: false
//     },
//     {
//         name: 5,
//         flag: false
//     },
//     {
//         name: 6,
//         flag: false
//     },
//     {
//         name: 7,
//         flag: false
//     },
//     {
//         name: 8,
//         flag: false
//     },
// ])
// 存储搜索兴趣技能input的输入内容
let inputValue = ref('')
// 存储当前页码 --- 兴趣爱好
let pageNum = ref(0)
// 存储一页显示几条 --- 兴趣爱好
let pageSize = ref(20)
onMounted(() => {
    bus.on('show', (show) => {
        dialogFormVisible.value = show;
        crumbs.value = JSON.parse(localStorage.getItem("hobbyList"));
        
    })
})


watch(
    () => inputValue.value,
    () => {
        getSearchHobby()
    }
)


// 搜索兴趣技能
const getSearchHobby = debounce(() => {
    recommendStore.getSearchHobby(inputValue.value)
},1000)
// 初始化数据
const getHobbiesInit = () => {
    recommendStore.getHobbies(pageNum.value, pageSize.value)
    recommendStore.getSearchHistory()
}
// 点击推荐兴趣技能
const handlerChange = (hobbyItem) => {

    if (crumbs.value.length >= 7&& !hobbyItem.flag) {

        ElMessage({
            type: 'warning',
            message: '亲，不能再选了哦！',
        })
        return
    }
    hobbyItem.flag = !hobbyItem.flag
    // flag为true 就向crumbs添加
    if (hobbyItem.flag) {
        crumbs.value.push(hobbyItem)
        recommendStore.checkedHobbies=crumbs.value;
        localStorage.setItem("hobbyList",JSON.stringify( crumbs.value));
        return
    }
    //    let hobby = hobbies.filter(hob=>hob.flag)
    // hobby[index].flag = false
    crumbs.value = crumbs.value.filter(item => item.id != hobbyItem.id)
    recommendStore.checkedHobbies=crumbs.value;
    localStorage.setItem("hobbyList",JSON.stringify( crumbs.value));
}
// 删除面包屑
const removeCrumb = (item,index) => {
    item.flag = false
    crumbs.value.splice(index, 1);
    recommendStore.checkedHobbies=crumbs.value;
    localStorage.setItem("hobbyList",JSON.stringify( crumbs.value));
    // recommendStore.hobbies.forEach(item1=>{
    //         if(item1.id==item.id){
    //             item.flag=false;
    //         }
    // })

}
// 点击返回按钮
const toBack = ()=>{
    inputValue.value = ''
}
// 点击搜索到的兴趣技能
const addHobbies =(item)=>{
    crumbs.value.push(item)
    recommendStore.checkedHobbies=crumbs.value;
    localStorage.setItem("hobbyList",JSON.stringify( crumbs.value));
    inputValue.value = ''
}
// 滚动条触发事件
const handlerScroll = throttle(() => {
    pageNum.value = pageNum.value + 1;
    getHobbiesInit(pageNum.value, pageSize.value)
}, 2000)
// 和我的页面的请选择按钮相关
const addHobby = ()=>{
    crumbs.value = recommendStore.checkedHobbies
    recommendStore.hobbies.filter(item=>{
        item === recommendStore.checkedHobbies.forEach()
            
       
    }) 
}
// 点击确定按钮
const save = () => {
    recommendStore.getHobbiesSave(pageNum.value);
  
    dialogFormVisible.value = false;

}
defineExpose({
    getHobbiesInit,
    addHobby,
})

</script>

<style scoped>

.dialog-footer {
    position: relative;
    top: 10px;
    right: -700px;
}

/* 搜索列表 */
.searchList{
    height: 372px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.searchTitle{
    color: #b1b5c1;
    margin: 8px 0 20px 0;
}
.search_item {
    width: 276px;
    height: 44px;
    background: #f5f7f9;
    padding: 12px;
    margin: 0 20px 25px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.search_item .love {
    width: 44px;
    height: 44px;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    line-height: 56px;
    /* margin-right: 10px; */
}

.search_item text {
    font-size: 14px;
}
.search_item text p{
    /* height: 22px; */
    /* line-height: 22px; */
    /* margin-top: 5px; */
}
.searchName{
    font-size: 16px;
    position: relative;
    top: -4px;
}
.addIcon {
    /* margin-left: 50px; */
    /* position: relative; */

}

/* 选择兴趣爱好 */
.hobbyTitle {
    position: relative;
    top: -30px;
}

.hobbyTitle .title {
    font-size: 18px;
    color: #000;
}

.hobbyTitle .title span {
    padding-left: 20px;
}

.hobbyTitle .text {
    margin-top: 10px;
    font-size: 14px;
    color: #b1b5c1;
}

.inputBox {
    width: 295px;
    position: relative;
}

/* icon图标 */
.inputIcon {
    width: 33px;
    height: 40px;
    /* background-color: #7d8090; */
    position: absolute;
    /* top: 0; */
    z-index: 2;
    text-align: center;
}


.tagListBox {
    color: #000;
}

.tagItem {
    margin: 10px 22px 11px 0;
    width: 98px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    border: 1px solid #eee;
    /* float: left; */
    display: inline-block;
    position: relative;
}

.tagItem span {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 9;
}

/* 面包屑 */
.crumbsBox {
    display: flex;
}

.crumbs {
    width: 98px;
    height: 38px;
    border: 1px solid #eee;
    margin: 0 22px 21px 0;
    line-height: 38px;
    text-align: center;
    position: relative;
    color: #000;
}

.crumbs span {
    position: absolute;
    top: -10px;
    right: -10px;
}
</style>